<template>
  <div class="view">
    <div class="top">
      <div class="title">土味云顶01：打工皇帝的工具人体验</div>
      <div class="introdustion">游戏>网络游戏 2020-06-13 17:34:01</div>
      <div class="num">72播放·0弹幕 未经作者授权，禁止转载</div>
    </div>
    <div id="dplayer"></div>

    <div id="brief-intr">所有事物最终都会分别，就像在盛夏依依不舍的毕业生们，曾许诺海枯石烂的情人和还未被氧化夺走氢离子的酚羟基。</div>

    <comment></comment>
  </div>
</template>

<script>
  import Dplayer from "dplayer"
  import Comment from "../comment/Comment.vue"

  export default {
    name: "Player",
    mounted() {
      const dplayer = new Dplayer({
        container: document.getElementById("dplayer"),
        video: {
          url: new URL("@/assets/temporary/video.mp4", import.meta.url).href,
          pic: new URL("@/assets/temporary/cover.png", import.meta.url).href, 
        }
      })
    },
    components:{
      Comment
    }
  }
</script>

<style scoped>
  #dplayer {
    width: 600px;
    height: 400px;
  }
  .top{
  }
  .title {
    font: 24px "宋体";
    /*margin-top: 10px;*/
    margin-bottom: 10px;
  }
  .introdustion {
    color: gray;
    font: 14px "宋体";
    margin-bottom: 10px;
  }

  .num {
    color: gray;
    font: 14px "宋体";
    margin-bottom: 10px;
  }
  #brief-intr{
    margin-top: 5px;
    margin-bottom: 5px;
    font: 10px "宋体";
  }

</style>